<template>
  <div>
    <!-- 个人信息 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar
          title="个人信息"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>

      <div class="bg"></div>

      <div class="userinfo">
        <div class="userImage">
          <img
            :src="userall.userFace"
            alt=""
            class="imguser"
            @click="showphoto"
          />
          <p class="name">{{ userall.username }}</p>
          <p class="naus">{{ userall.certificationStatus }}</p>
        </div>
        <p class="nam">梦想成为优秀打工人的打工人</p>

        <div class="cellArea">
          <van-cell-group>
            <van-field label="手机号" :value="userall.telephone" disabled />
            <van-field label="身份证号" :value="userall.idCard" disabled />
            <van-field label="银行卡号" :value="userall.bankCard" disabled />
          </van-cell-group>
        </div>
        <!-- 身份证正面照: -->
        <div class="idCardPhoto">
          <div class="idC">身份证正面照:</div>
          <van-image class="idphoto" :src="userall.idcardPhotoPositive" />
          <div style="width:100%;height:80px"></div>
        </div>
        <!-- 身份证反面照: -->
        <div class="idCardPhoto">
          <div class="idC">身份证反面照:</div>
          <van-image class="idphoto" :src="userall.idcardPhotoNegative" />
          <div style="width:100%;height:80px"></div>
        </div>
        <!-- 银行卡照: -->
        <div class="idCardPhoto">
          <div class="idC">银行卡照:</div>
          <van-image class="idphoto" :src="userall.bankCardPhoto" />
          <div style="width:100%;height:70px"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/http/axios";
import { Toast } from "vant";
import Vue from "vue";
import { Image as VanImage } from "vant";
export default {
  data() {
    return {
      userid: "",
      userall: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: "/manager/mine",
      });
    },
    showphoto() {
      this.showp = true;
    },
    //获取用户所有信息
    async getUserInfo(userid) {
      let obj = {
        id: userid,
      };
      let res = await get("/baseUser/findUserDetailsById", obj);
      this.userall = res.data.data;
      console.log(this.userall);
    },
  },
  created() {
    this.userid = this.$route.query.userid;
    // console.log(this.userid);
    this.getUserInfo(this.userid);
  },
};
</script>

<style scoped>
.body {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
    Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB,
    Microsoft Yahei, sans-serif;
}
/* 背景 */
.bg {
  height: 180px;
  background-image: linear-gradient(to right, #2bc0e4, #eaecc6);
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
/* 用户信息 */
.userinfo {
  width: 88%;
  height: 170px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: rgb(204 204 204) 0px 0px 10px;
  position: absolute;
  top: 170px;
  transform: translate(-50%, -50%);
  left: 50%;
  /* margin-left: -40%; */
  opacity: 0.8;
  border-radius: 8px;
}
.userinfo .userImage {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  background-color: blueviolet;
  transform: translate(-50%, -40%);
}
.imguser {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
.name {
  margin: 3.5em;
  text-align: center;
  margin: 0 auto;
}
.naus {
  margin: 3.5em;
  text-align: center;
  margin: 0 auto;
  font-size: 13px;
  margin-top: 18px;
  color: gray;
}
.nam {
  text-align: center;
  margin: 0 auto;
  font-size: 13px;
  color: #2bc0e4;
  margin-top: 80px;
}
.cellArea {
  margin: 90px auto;
  box-shadow: rgb(158 117 255 / 20%) 4px 4px 4px 0px;
  transition: all 0.3s ease 0s;
  width: 100%;
  border-radius: 5px;
}
.idCardPhoto {
  font-size: 13px;
  margin-left: 6px;
  margin-top: -70px;
}
.idC{
  margin-bottom: 5px;
  margin-left: 35%;
}
.idphoto{
  width: 300px;
  height: 200px;
}
</style>